<template>
 <div id="map" style="height:600px"></div>
</template>

<script>
export default {
    components: {},
    data: () => ({}),
    computed: {},
    methods: {},
    watch: {},
    mounted() {
        var js1 = document.createElement("script");
        js1.src = "https://cdn.bootcdn.net/ajax/libs/proj4js/2.6.2/proj4-src.js";
        var js2 = document.createElement("script");
        js2.src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js";
        var js3 = document.createElement("script");
        js3.src = "https://iclient.supermap.io/dist/ol/iclient-ol.min.js";
        document.body.appendChild(js1);
        document.body.appendChild(js2);
        document.body.appendChild(js3);

        this.$nextTick(() => {
            setTimeout(() => {
                const projection = new ol.proj.Projection({
                    code: 'EPSG:4490',
                    units: 'degrees',
                    extent: [-180, -90, 180, 90],
                    worldExtent: [-180, -90, 180, 90],
                    axisOrientation: 'neu'
                })
                ol.proj.addProjection(projection)

                const projection4490 = new ol.proj.get('EPSG:4490')

                const restLayer1 = new ol.layer.Tile({
                    source: new ol.source.TileSuperMapRest({
                        url: 'http://10.171.142.15:8080/GISServices/spService/cfb7457737d841efs28daffa2d058e7800/services/map-GT_TDLYXZ2018/rest/maps/TDLYXZ2018_CGCS2000',
                        extent: projection4490.getExtent()
                    })
                })

                const restLayer3 = new ol.layer.Tile({
                    source: new ol.source.TileSuperMapRest({
                        url: 'http://10.171.142.15:8080/GISServices/spService/cfb7457737d841efs28daffa2d058e7800/services/map-NH_ZS_XZJX_CGCS2000/rest/maps/NH_SQCJBJ_CGCS2000',
                        extent: projection4490.getExtent()
                    })
                })

                const restLayer2 = new ol.layer.Tile({
                    source: new ol.source.TileSuperMapRest({
                        url: 'http://10.171.142.15:8080/GISServices/spService/cfb7457737d841efs28daffa2d058e7800/services/map-NH_DZDT2018_CGCS2000/rest/maps/DZDT',
                        extent: projection4490.getExtent()
                    })
                })

                const map = new ol.Map({
                    target: 'map',

                    layers: [

                        restLayer1,
                        restLayer3
                    ],

                    view: new ol.View({
                        center: [113, 23],
                        projection: projection4490,
                        zoom: 11,
                        maxZoom: 20,
                        minZoom: 0,
                        constrainResolution: true
                    })
                })
            }, 1000)
        })

    },
}
</script>

<style scoped>
@import 'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css';
@import 'https://iclient.supermap.io/dist/ol/iclient-ol.min.css';
</style>
